<template>
  <v-card
    color="#3F4552"
    dark
    style="border-radius: 0"
    @click="toPersonalCenterPage"
  >
    <v-list-item class="px-0">
      <v-list-item-avatar style="height: 150px; width: 150px; margin: 0">
        <v-icon size="85">
          mdi-account-circle
        </v-icon>
      </v-list-item-avatar>
      <v-list-item-content>
        <v-list-item-title
          v-if="this.$store.state.currentUser"
          v-text="this.$store.state.currentUser.username"
        ></v-list-item-title>
        <v-list-item-title v-else>未登录</v-list-item-title>
        <!-- <v-list-item-subtitle class="mt-2">
          <v-btn x-small outlined>黄金会员</v-btn>
        </v-list-item-subtitle> -->
      </v-list-item-content>
      <v-spacer></v-spacer>
      <v-icon class="mr-4" size="35">mdi-chevron-right</v-icon>
    </v-list-item>
  </v-card>
</template>

<script>
// @ is an alias to /src

export default {
  methods: {
    toPersonalCenterPage() {
      this.$router.push('/personalCenter');
    }
  }
};
</script>
